<?php if (!defined('THINK_PATH')) exit();?>	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>新疆汽配网后台</title>
		<link rel="stylesheet" href="/Public/layui/css/layui.css">
		<style type="text/css">
		    #demo2,#demo3{
				overflow:auto;
			}
		    #demo2 .zizhi,#demo3 .imgs{
		    	height:50px !important; margin:10px; position:relative; float:left;
		    }
		    #demo2 .zizhi img,#demo3 .imgs img{
		    	height:50px !important;
		    }
		    #demo2 .zizhi .baca,#demo3 .imgs .baca{
		    	position:absolute;color:red;right:0;top:0;width:5px; height:5px;
		    	cursor:pointer;
		    }

		</style>
	</head>
	<body>
		 <!--添加商品表单-->
	  <div id="add_car" style=" padding:20px;">
			<form class="layui-form">
				<div class="layui-form-item">
					<label class="layui-form-label">商家名称：</label>
					<div class="layui-input-block">
						<input type="text" name="title" id="title" value="" lay-verify="required" placeholder="请输入商家名称" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">商家简介：</label>
					<div class="layui-input-block">
						<input type="text" name="jianxie" id="jianxie" value="" lay-verify="required" placeholder="请输入商家简介" class="layui-input">
					</div>
				</div>

				<div class="layui-upload">
				  <label class="layui-form-label">店铺照片</label>
				  <button type="button" class="layui-btn" id="test1">上传图片</button>
				  <div class="layui-upload-list" style="padding-left: 110px;">
				    <img class="layui-upload-img" id="demo1" src="" style="width: 105px;height: 105px;">
				  </div>
				</div> 

				<div class="layui-upload" style="margin-left: 110px;">
					<label style="margin-left: -110px;" class="layui-form-label">产品展示：</label>
			        <button type="button" class="layui-btn" id="test3">产品图上传</button> 
			        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			          预览图：
			          <div class="layui-upload-list" id="demo3">
						
			          </div>
			       </blockquote>
			    </div>

			    <div class="layui-upload" style="margin-left: 110px;">
					<label style="margin-left: -110px;" class="layui-form-label">资质图片：</label>
			        <button type="button" class="layui-btn" id="test2">资质图上传</button> 
			        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
			          预览图：
			          <div class="layui-upload-list" id="demo2">

			          </div>
			       </blockquote>
			    </div>

			    <div class="layui-form-item">
					<label class="layui-form-label">商家详情：</label>
					<div class="layui-input-block">
						<input type="text" name="content" id="content" value="" lay-verify="required" placeholder="商家详情" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">主营业务：</label>
					<div class="layui-input-block">
						<input type="text" name="zhuying" id="zhuying" value="" lay-verify="required" placeholder="主营业务" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">联系人：</label>
					<div class="layui-input-block">
						<input type="text" name="name" id="name" value="" lay-verify="required" placeholder="请输入联系人" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">QQ：</label>
					<div class="layui-input-block">
						<input type="text" name="QQ" id="QQ" value="" lay-verify="required" placeholder="请输入QQ" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">微信：</label>
					<div class="layui-input-block">
						<input type="text" name="wechar" id="wechar" value="" lay-verify="required" placeholder="请输入微信" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">座机：</label>
					<div class="layui-input-block">
						<input type="text" name="pgone" id="pgone" value="" lay-verify="required" placeholder="请输入座机" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">手机：</label>
					<div class="layui-input-block">
						<input type="text" name="moblie" id="moblie" value="" lay-verify="required" placeholder="请输入手机" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">地址：</label>
					<div class="layui-input-block">
						<input type="text" name="address" id="address" value="" lay-verify="required" placeholder="请输入地址" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">排序：</label>
					<div class="layui-input-block">
						<input type="text" name="sort" id="sort" value="" lay-verify="required" placeholder="请输入排序" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">热门店铺：</label>
					<div class="layui-input-block">
						<input type="text" name="hot" id="hot" value="" lay-verify="required" placeholder="热门店铺" class="layui-input">
					</div>
				</div>


			    <div class="layui-form-item" style="margin-top:20px;">
					<div class="layui-input-block">
						<button  class="layui-btn" class="layui-btn" lay-submit lay-filter="add">添加</button>
					</div>
				</div>
			</form>
		</div>
		<script src="/Public/layui/layui.all.js"></script>
		<script charset="utf-8" src="/Public/kind/kindeditor-all-min.js"></script>
		<script type="text/javascript">
			var logo = "";
			var imgs =[];
			var zizhi =[];

	  		//普通图片上传
	  		upload.render({
	    		elem: '#test1',
	    		url: '/Admin/GoodsParts/partslogo',
	    		before: function(obj){
	      			//预读本地文件示例，不支持ie8
		        obj.preview(function(index, file, result){
		       		 $('#demo1').attr('src', result); //图片链接（base64）
		      		});
		    	},
		    	done: function(res){
		    		logo = res.src;
		    		layer.msg(res.msg);
	    		}
			})
			//产品图上传
			upload.render({ 
				elem: '#test3',
				url: '/Admin/GoodsParts/partsimg',
				multiple: true,
				before: function(obj){
					
				},
				done: function(res){
					imgs.push(res.data.src);
					var resrc = res.data.src.replace(/\./g, "").replace(/\//g, "").replace(/\_/g, "");
					var html = 
					'<div class="imgs" id="'+resrc+'">'+
						'<img src="'+res.data.src+'" class="layui-upload-img" >'+
						'<div class="baca" onclick=del_imgs("'+res.data.src+'")>X</div>'+
					'</div>';
					$('#demo3').append(html);
					layer.msg("添加成功");
				}
			});
			//资质图片上传
			upload.render({
				elem: '#test2',
				url: '/Admin/GoodsParts/partszizhi',
				multiple: true,
				before: function(obj){
					
				},
				done: function(res){
					zizhi.push(res.data.src);
					var resrc = res.data.src.replace(/\./g, "").replace(/\//g, "").replace(/\_/g, "");
					var html = 
					'<div class="zizhi" id="'+resrc+'">'+
						'<img src="'+res.data.src+'" class="layui-upload-img" >'+
						'<div class="baca" onclick=del_zizhi("'+res.data.src+'")>X</div>'+
					'</div>';
					$('#demo2').append(html);
					layer.msg("添加成功");
				}
			});


		   //用户修改提交
			form.on('submit(add)', function(data){
				data.field.logo = logo;		//汽车logo
				data.field.imgs = imgs;		//产品图
				data.field.zizhi = zizhi;	//资质图
				var param=data.field;
				console.log(param);
				ajax('/Admin/GoodsParts/insert',param,function(res){
					layer.msg(res.msg);
					//window.location.href="/Admin/GoodsParts/index"
				})
				return false; //阻止表单跳转
			});

			//删除多张资质图片
			function del_zizhi(id){
				var resrc = id.replace(/\./g, "").replace(/\//g, "").replace(/\_/g, "");
				for (var i = 0; i < zizhi.length; i++) {
					if(zizhi[i] == id){
						zizhi.splice(i,1);			//splice(删除项目的位置,删除x项目数量) 方法向/从数组中添加/删除项目，然后返回被删除的项目。
						$('#'+resrc).remove();
					}
				}
				console.log(zizhi);
			}
			//删除产品展示图片
			function del_imgs(id){
				var resrc = id.replace(/\./g, "").replace(/\//g, "").replace(/\_/g, "");
				for (var i = 0; i < imgs.length; i++) {
					if(imgs[i] == id){
						imgs.splice(i,1);			//splice(删除项目的位置,删除x项目数量) 方法向/从数组中添加/删除项目，然后返回被删除的项目。
						$('#'+resrc).remove();
					}
				}
				console.log(imgs);
			}
		</script>
	</body>
	</html>